<!DOCTYPE html>
<html>
<head>
<title>Electromagnetic Induction Diagram</title>
</head>
<body>
<canvas id="myCanvas" width="500" height="400" style="border:1px solid #d3d3d3;"></canvas>
<script>
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');

    // Clear canvas with a white background
    ctx.fillStyle = 'white';
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // General style settings
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 2.5;

    // Parameters for the drawing
    const left_cx = 160;
    const cy = 200;
    const right_cx = 340;
    const radius = 80;
    const gap_angle = 0.2; // Half-angle for the gap where the battery is placed
    
    // Calculate coordinates for battery connection points
    const conn_x = left_cx + radius * Math.cos(Math.PI - gap_angle);
    const top_conn_y = cy + radius * Math.sin(Math.PI - gap_angle);
    const bot_conn_y = cy + radius * Math.sin(Math.PI + gap_angle);
    const battery_x = conn_x - 10;

    // Draw the left loop (as an arc)
    ctx.beginPath();
    // Use arc() with anticlockwise=true to draw the large part of the circle
    ctx.arc(left_cx, cy, radius, Math.PI - gap_angle, Math.PI + gap_angle, true);
    ctx.stroke();

    // Draw the voltage source and its connectors
    // Connector wires from loop to battery symbol
    ctx.beginPath();
    ctx.moveTo(conn_x, top_conn_y);
    ctx.lineTo(battery_x, top_conn_y);
    ctx.moveTo(conn_x, bot_conn_y);
    ctx.lineTo(battery_x, bot_conn_y);
    ctx.stroke();

    // Battery terminals
    // Positive terminal (top, longer)
    ctx.beginPath();
    ctx.moveTo(battery_x - 20, top_conn_y);
    ctx.lineTo(battery_x + 20, top_conn_y);
    ctx.stroke();

    // Negative terminal (bottom, shorter)
    ctx.beginPath();
    ctx.moveTo(battery_x - 10, bot_conn_y);
    ctx.lineTo(battery_x + 10, bot_conn_y);
    ctx.stroke();

    // Draw the right loop (a full circle)
    ctx.beginPath();
    ctx.arc(right_cx, cy, radius, 0, 2 * Math.PI);
    ctx.stroke();

    // Draw text labels and the point 'P'
    // 'V' label
    ctx.font = 'bold 30px serif';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText('V', battery_x - 35, cy);

    // Point 'P' (filled circle)
    ctx.beginPath();
    ctx.arc(left_cx, cy, 4, 0, 2 * Math.PI);
    ctx.fill();

    // 'P' label
    ctx.font = 'bold 30px serif';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'top';
    ctx.fillText('P', left_cx, cy + 12);
</script>
</body>
</html>